<template>
    <section class="vipRechargeBox">
        <ul class="vipRechargeList clearfix">
            <li class="free">
                <p>普通会员</p>
                <p>免费</p>
                <p>注册用户即为普通会员</p>
            </li>
            <li class="year">
                <p>年度VIP</p>
                <p>298<span>元/年</span></p>
                <p>每天仅需0.8元</p>
                <p>
                    <button @click="nowBuy('一年',false,12,298,12)">立即购买</button>
                </p>
            </li>
            <li>
                <p>季度VIP</p>
                <p>90<span>元/季</span></p>
                <p></p>
                <p>
                    <button @click="nowBuy('一个季度',true,3,90,3)">立即购买</button>
                </p>
            </li>
        </ul>
        <div class="serviceList">
            <p>
                查看服务对比，选择适合自己的会员方案
            </p>
            <div class="serviceImg">
               <tables></tables>
            </div>  
        </div>
        <div class="maskMsgBox" v-if="maskShow">
            <div class="maskMsg">
                <button class="maskMsgClose" @click="closeMask">X</button>
                <header>订单信息</header>
                <ul class="clearfix orderMsg">
                    <li>
                        <span>开通账号</span>
                        <span>{{userInfo.userInfo.data.mobile}}</span>
                    </li>
                    <li>
                        <span>开通时长</span>
                        <span>{{timeLong}}</span>
                    </li>
                    <li>
                        <span>方案价格</span>
                        <span v-if="yearNo">90元</span>
                        <span v-else>298元</span>
                    </li>
                    <li>
                        <span>到期时间</span>
                        <span>{{maturityTime}}</span>
                    </li>
                </ul>
                <div class="orderMode">
                    <h3>支付方式</h3>
                    <div class="orderModeBtn">
                        <button @click="modeClick('weixin')" :class="{'activeBtn':orderMode=='weixin'}">微信支付<i v-if="orderMode=='weixin'"></i></button>
                        <button @click="modeClick('zhifubao')" :class="{'activeBtn':orderMode=='zhifubao'}">支付宝支付<i v-if="orderMode=='zhifubao'"></i></button>
                    </div>
                </div>
                <div class="orderNum clearfix">
                    <span>支付金额</span>
                    <span>{{money}}元</span>
                </div>
                <div class="orderSubmitBtn">
                    <button @click="orderSubmit">提交订单</button>
                </div>
            </div>
        </div>
        <div class="rechargeMask" v-if="weixinMaskShow">
            <div class="rechargeMaskBox" :style="style">
                <div class="drag" @mousedown="move">
                        <span class="loginClose el-icon-close" @click="rechargeMaskClose()"></span>
                    </div>
                <header class="rechargeMaskTitle">支付金额：￥<span id="rechargeNum">{{money}}</span></header>
                <p class="rechargeMaskScanning">微信扫码支付</p>
                <div>
                    <div class="rechargeErweima">
                        <div id="qrcode">正在生成二维码，请稍后...</div>
                        <span class="erweimaInvalid" :class="{'erweimaMask':invalid}">
                            {{erweimaText}}
                            <button v-if="invalid" @click="refreshBtn">刷新</button>
                        </span>
                    </div>
                    <p class="erweimaCountdown" v-if="!invalid">二维码在{{erweimaNmu}}秒后失效</p>
                </div>
            </div>
        </div>
    </section>
</template>
<script>
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex';
import tables from './tables'
import QRCode from 'qrcodejs2'
export default {
    // name:"vip充值",
    props:["userInfo"],
    data(){
        return{
            maskShow : false,//订单信息弹窗
            timeLong : '',//时长
            yearNo : false,//每年或每季
            maturityTime : '',//到期时间
            orderMode : 'weixin',//支付方式
            money : '',//支付金额
            weixinMaskShow : false,//微信支付弹窗
            invalid : false,//二维码失效
            vip: 12,//会员开通月份
            erweimaText:"",
            timer : null,
            erweimaNmu : 60,//二维码倒计时
            style:{//弹窗的位置
                top: "300px",
                left: "600px"
            },
        }
    },
    methods: {
         ...mapMutations(//mutations中的方法
            ["loginShow","loginClose","loginLoginName","registerLoginName"]
        ),
        nowBuy(msg,bl,num,money,month){//点击立即购买按钮
            if(!this.userInfo.userInfo){
                this.loginShow();
            }else{
                this.maskShow = true;//订单弹窗开启
                this.timeLong = msg;//时长
                this.yearNo = bl;//每季度或每年
                this.money = money;//支付金额
                this.vip = month;//开通月份
            //     var timestamp=new Date().getTime();
            //    var thenTime = timestamp+num*86400000;
            //    this.timeFormat(thenTime)
                // this.maturityTime = '1970年01月01日';
                axios.get("viptime/"+num).then(response=>{
                    this.maturityTime = response.data
                })
            };
            
        },
        closeMask(){
            this.maskShow = false;
            this.maturityTime = '';
        },
        timeFormat(timestamp){//计算到期时间
        //timestamp是整数，否则要parseInt转换,不会出现少个0的情况
            var time = new Date(timestamp);
            var year = time.getFullYear();
            var month = time.getMonth()+1;
            var date = time.getDate();
            var hours = time.getHours();
            var minutes = time.getMinutes();
            var seconds = time.getSeconds();
            this.maturityTime = year+'年'+this.add0(month)+'月'+this.add0(date)+'日'
        },
        add0(m){//计算时间补零
            return m<10?'0'+m:m 
        },
        modeClick(msg){//支付方式
            this.orderMode = msg;
        },
        orderSubmit(){//提交订单
            var This = this;
            if(this.orderMode=='weixin'){
                this.erweimaPosition();
                this.weixinMaskShow = true; 
                this.maskShow = false;
                var formData = {
                    "paytype" : "1",//支付类型(0支付宝1微信)
                    "type":1,//0 交易币/  1VIP
                    "vip" : this.vip
                }
                axios.post("/pay",formData).then(response=>{
                    this.qrcode(183,183,response.data.code_url)
                    This.timer = setInterval(function(){//微信支付生成二维码
                        This.erweimaNmu--;
                        if(This.erweimaNmu==0){
                            clearInterval(This.timer);
                            This.erweimaNmu=60;
                            This.invalid = true;
                            This.erweimaText = "二维码已失效，请刷新重试"
                        }
                    },1000)
                    this.paymentResults(response.data.out_trade_no)
                }).catch(error=>{
                    console.log(error.response,"失败")
                })
            }else if(this.orderMode=='zhifubao'){
                this.zhifubaoPay();
            }
        },
        zhifubaoPay(){//支付宝支付
            var formData = {
                    "paytype" : "0",//支付类型(0支付宝1微信)
                    "type":1,//0 交易币/  1VIP
                    "vip" : this.vip
                }
                axios.post("/pay",formData).then(response=>{
                    $("body").html(response.data)
                }).catch(error=>{
                    console.log(error.response)
                })
        },
        refreshBtn(){//刷新二维码
            var This = this;
            this.invalid = false;
            $("#qrcode").html("");
            this.erweimaText="";
            var formData = {
                    "paytype" : "1",//支付类型(0支付宝1微信)
                    "type":1,//0 交易币/  1VIP
                    "vip" : this.vip
                }
            axios.post("/pay",formData).then(response=>{
                    this.weixinMaskShow = true; 
                    this.qrcode(183,183,response.data.code_url)
                    This.timer = setInterval(function(){//微信支付生成二维码
                                This.erweimaNmu--;
                                if(This.erweimaNmu==0){
                                    clearInterval(This.timer);
                                    This.erweimaNmu=60;
                                    This.invalid = true;
                                    This.erweimaText = "二维码已失效，请刷新重试"
                                }
                        },1000)
                        this.paymentResults(response.data.out_trade_no)
                }).catch(error=>{
                    console.log(error.response,"失败")
                })
        },
        erweimaPosition(){//二维码弹窗位置
            this.style.left = ($(window).width()-330)/2+"px";
            this.style.top = ($(window).height()-330)/2+"px";
        },
        qrcode (width,height,url) {//生成二维码
            $("#qrcode").html("");
            let qrcode = new QRCode('qrcode', {
                "width": width,
                "height": height, // 高度
                "text": url, // 二维码内容
                "render": 'table'
            })
        },
        paymentResults(orderNumber){//请求查询微信支付状态
            clearInterval(this.timer2);
            var over = 60;
            var This = this;
            this.timer2 = setInterval(function(){
                over-=6;
                axios.get("/pay/wxpayreturn/"+orderNumber).then(response=>{
                    //支付成功要做的事
                    if(response.data.status=="1"){
                        clearInterval(This.timer2);
                        This.$router.push("/userCore")
                    }
                })
                if(over<=0){
                    clearInterval(This.timer2);
                }
            },6000)
        },
        move(e){//弹出框拖拽
	      let odiv = e.target.parentNode;    //获取目标元素
	       
	      //算出鼠标相对元素的位置
	      let disX = e.clientX - odiv.offsetLeft;
	      let disY = e.clientY - odiv.offsetTop;
	      document.onmousemove = (e)=>{    //鼠标按下并移动的事件
	        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
	        let left = e.clientX - disX;  
	        let top = e.clientY - disY;
	         
	        //绑定元素位置到positionX和positionY上面
	        this.positionX = top;
	        this.positionY = left;
	         
	        //移动当前元素
	        odiv.style.left = left + 'px';
	        odiv.style.top = top + 'px';
	      };
	      document.onmouseup = (e) => {
	        document.onmousemove = null;
	        document.onmouseup = null;
	      };
        },
        rechargeMaskClose(){//关闭微信支付弹窗
            this.weixinMaskShow = false;
            this.invalid = false;
            this.erweimaNmu = 60;
            this.rechargeBtn= false;//关闭弹窗可以点击
            clearInterval(this.timer);
            $("#qrcode").html("")
            this.erweimaText="";
        },
    },
    components:{
        tables
    }
}
</script>

<style>
.vipRechargeBox{
    padding: 0 78px;
    padding-top: 37px;
}
.vipRechargeBox .vipRechargeList{
    margin-right: -53px;
    margin-bottom: 18px;
    /* padding-top:10px; */
}
.vipRechargeBox .vipRechargeList li{
    float: left;
    width: 280px;
    height: 235px;
    border: 1px solid #dedede;
    border-radius: 4px;
    margin-right: 53px;
    padding-top: 22px;
    text-align: center;
}
.vipRechargeBox .vipRechargeList li p:nth-of-type(1){
    font-size: 24px;
    line-height: 64px;
    font-weight: bold;
}
.vipRechargeBox .vipRechargeList li p:nth-of-type(3){
    font-size: 14px;
    line-height: 24px;
    height: 24px;
    color: #3b3b3b;
    margin-bottom: 22px;
}
.vipRechargeBox .vipRechargeList li p:nth-of-type(2){
    font-size: 30px;
    line-height: 44px;
    color: #f45d54;
    font-weight: bold;
}
.vipRechargeBox .vipRechargeList li p:nth-of-type(4) button{
    width: 151px;
    line-height: 34px;
    font-size: 14px;
    background: #f45d54;
    color: #fff;
    outline: none;
    padding: 0;
    border:none;
    border-radius: 4px;
}
.vipRechargeList li p:nth-of-type(2) span{
    display:inline-block;
    font-size: 14px;
    line-height: 30px;
    color: #666666;
    margin-left: 3px;
}
.vipRechargeBox .vipRechargeList li:hover{
    border-color: #ff9892;
    box-shadow: 0px 0px 20px rgba(255, 152, 146, 0.4);
}
.serviceList p{
    font-size: 20px;
    line-height: 98px;
    color: #333333;
    font-weight: bold;
}
.serviceImg img{
    display:block;
    width: 954px;
    height: 426px;
}
.maskMsgBox{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    background: rgba(0, 0,0,.45);
}
.maskMsg{
    position: relative;
    width: 470px;
    height: 510px;
    background: #fff;
    border-radius: 5px;
    margin: 120px auto;
    padding-top: 10px;
}
.maskMsg .maskMsgClose{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 25px;
    height: 25px;
    font-size: 25px;
    line-height: 25px;
    outline: none;
    border: none;
    padding: 0;
    background: transparent;
}
.maskMsg header{
    font-size: 18px;
    line-height: 52px;
    padding-left: 30px;
    color: #333333;
}
.maskMsg ul{
    padding-left: 42px;
    padding-right: 50px;
    padding-bottom: 16px;
    border-bottom: 1px solid #dddddd;
}
.maskMsg ul li{
    float: left;
    width: 100%;
}
.orderMsg li span:nth-of-type(1){
    float: left;
    font-size: 14px;
    line-height: 30px;
    color: #333;
}
.orderMsg li span:nth-of-type(2){
    float: right;
    font-size: 14px;
    line-height: 30px;
    color: #f6736b;
}
.orderMsg li span:nth-of-type(2) i{
    font-size: 12px;
    font-style:normal;
}
.orderMode{
    padding-top: 10px;
}
.orderMode h3{
    font-size: 18px;
    line-height: 52px;
    color: #333;
    padding-left: 30px;
}
.orderModeBtn{
    text-align: center;
    padding-bottom: 35px;
    border-bottom: 1px solid #ddd;
}
.orderModeBtn button{
    width: 180px;
    height: 58px;
    border: 1px solid #ddd;
    padding: 0;
    outline: none;
    border-radius: 4px;
    font-size: 18px;
    line-height: 58px;
    color: #333;
    text-align: left;
    position: relative;
}
.orderModeBtn button i{
    position:absolute;
    right: 0;
    bottom: 0;
    width: 45px;
    height: 29px;
    background: url(./img/modeIcon.png) no-repeat center;
    
}
.orderModeBtn .activeBtn{
    border-color: #ff5d55;
}
.orderModeBtn button:nth-of-type(1){
    padding-left: 76px;
    background: url(./img/weixin1.png) no-repeat 16px 9px;
    margin-right: 43px;
}
.orderModeBtn button:nth-of-type(2){
    padding-left: 76px;
    background: url(./img/zhifubao1.png) no-repeat 16px 14px;
}
.orderNum{
    padding-left: 30px;
    padding-right: 50px;
    padding-bottom: 6px;
}
.orderNum span:nth-of-type(1){
    float:left;
    color: #333;
}
.orderNum span:nth-of-type(2){
    float:right;
    color: #f45d54;
}
.orderNum span{
    font-size: 18px;
    line-height: 52px;
}
.orderSubmitBtn{
    text-align: center;
    margin-top: 15px;
}
.orderSubmitBtn button{
    width: 300px;
    /* height: 62px; */
    font-size: 18px;
    line-height: 48px;
    color: #fff;
    border-radius: 4px;
    text-align: center;
    background: #ea514b;
    outline:none;
    padding: 0;
    border:none;
}
.rechargeErweima{
    width: 185px;
    height: 185px;
    /* border: 1px solid red; */
    margin: 0 auto;
    position: relative;
}
.rechargeErweima #qrcode{
    width: 100%;
    height: 100%;
}
.erweimaMask{
    background: rgba(255, 255,255,.95)
}
.erweimaInvalid{
    position:absolute;
    width: 100%;
    height: 100%;
    top:0;
    font-size: 14px;
    color: #333;
    line-height: 180px;
    text-align: center;
}
.erweimaInvalid button{
    width: 72px;
    font-size: 16px;
    line-height: 30px;
    border-radius: 4px;
    position: absolute;
    top: 110px;
    left: 56px;
    outline: none;
    border: none;
    background: #ea514b;
    color: #fff;
}   
.erweimaCountdown{
    width: 100%;
    font-size: 14px;
    line-height: 42px;
    color: #8a8a8a;
    text-align: center;
    position: absolute;
    bottom: 2px;
}
</style>